ES6 module

ES6的模組化，使用 import、export、from，傳統無法使用，必須在 script 後方加上 module 才能使用。

<script type="module">
    // import、export、from
</script>

模組化概念

• 分為兩個，一個是 import 匯入，一個是 export 匯出。
• 優先先看 export > import，先有 export 方法再來決定 import 方法。
• export
  • export default（預設匯出）：一個檔案只能有一個。
    • 對應 import (自訂名稱) from …
    • 大多用在開發上
  • export named（具名匯出）：一個檔案可以有很多個。
    • 對應 import (自訂名稱) from …
    • 大多用在函式庫（框架、外部套件）
    • 一次只取出一個內容
    • 若想要一次全部匯入的話，可以用

    •   import * as all from './module.js';
        //將全部的具名，匯出後賦予到 all 這個物件上
      

課程範例

在自定義 module.js 上的 export 方法

// module.js
export default {
    myName: '小明'
    fn: function(){
        console.log(this, myName);
    }
}
// 預設匯出

// JS
import 小明 from './module.js';
小明.fn();

import 小華 from './module.js';
小華.fn();
// 輸出結果 : 小明小明